/**
 * Created by yaqiangbi on 2017/6/12.
 */
$(document).ready(function () {
    $("#p1Click1").click(function () {
        alert($("#p1").html())
    });
    $("#p1Click2").click(function () {
        alert($("#p1").text())
    });
    $("#iClick1").click(function () {
        alert($("#input1").val())
    });
    $("#aClick1").click(function () {
        alert($("a").attr("href"))
    });
    $("#addTHV").click(function () {
        $("#input1").val("Hello world");
        $("#setTH").html("<b>Hello world</b>");
    });
    $("#setFunction").click(function () {
        $("#p1").text(function (i,origText) {
            return "旧值:"+origText+"    新值:这是后来添加的值"
        });
        $("#setTH").html(function (i,originText) {
            return "旧值:"+originText+"     新值:<b>这是后来添加的新值</b>"
        })
    });
    $("#setAttr").click(function () {
        $("a").attr({
            "href":"http://www.w3cschool.cn",
            "title":"W3CSchool学院"
        });
    });
    $("#setAttrFun").click(function () {
        $("a").attr("href",function (i,orinValue) {
            alert(orinValue);
            return "http://www.w3cschool.cn";
        })
    });
    $("#append").click(function () {
        $(this).append("我是插入进来的");
    });
    $("#prepend").click(function () {
        $(this).prepend("我是插入进来的");
    });
    $("#after").click(function () {
        $(this).after("<div id='div1' style='height:100px;width:300px;border:1px solid black;background-color:yellow;'><p>这是DIV中的文本</p><p id='divp1'>这是DIV中的文本</p></div>");
    });
    $("#before").click(function () {
        $(this).before("<p id='innerBefore'>我是插入进来的</p>");
    });
    $("#delete").click(function () {
        $("p").remove("#p1")
        $("#div1").empty();
        $("#innerBefore").remove();
    });
    $("h1").click(function () {
        $(this).addClass("blue");
        $("#addClass").addClass("import");
    });
    $("#addClass").click(function () {
        $(this).removeClass("import");
        $("h1").removeClass("blue");
    });
    $("#toggleclass").click(function () {
        $("h1").toggleClass("blue");
        $("#addClass").toggleClass("import");
    });
    $("#addcss").click(function () {
        $(this).css({"color":"#c1c1c1","border":"1px solid blue","background-color":"#666666"});
    });
    $("#frame").click(function () {
        var div = $(this)
        div.prepend("<p>Margin外宽:"+div.outerWidth(true)+"   Margin外高:"+div.outerHeight(true)+"</p>");
        div.append("<p>Border外宽:"+div.outerWidth()+"   Border外高:"+div.outerHeight()+"</p>");
        div.append("<p>Padding外宽:"+div.innerWidth()+"   Padding外高:"+div.innerHeight()+"</p>");
        div.append("<p>Element外宽:"+div.width()+"   Element外高:"+div.height()+"</p>");
    });
});